<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/index.css">
  <title>Document</title>
  <style>
    h1{
        text-align: center;
    }
    .form-container {
        background: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        width: 100%;
        height:100%;
    }
    .form-group {
        margin-bottom: 15px;
        width: 60%;
        display: block; /* 改为块级元素 */
        margin-left: auto; /* 左外边距设为自动 */
        margin-right: auto; /* 右外边距设为自动 */
    }
    label {
        display: block;
        margin-bottom: 5px;
    }
    input[type="text"],
    input[type="number"] {
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-sizing: border-box;
    }
    input[type="submit"] {
        width: 30%;
        padding: 10px;
        border: none;
        border-radius: 4px;
        background-color: #f0f0f0; /* 浅灰色背景 */
        color: black; /* 字体颜色通常与背景色相对，这里设置为黑色 */
        cursor: pointer;
        display: block; /* 改为块级元素 */
        margin-left: auto; /* 左外边距设为自动 */
        margin-right: auto; /* 右外边距设为自动 */
    }
    input[type="submit"]:hover {
        background-color: #e0e0e0;
    }
    .error {
        color: red;
        margin-bottom: 15px;
    }
</style>
</head>
<body>
  <div class="grid">
  
    <aside class="sidenav">
      <div class="sidenav__brand">
        <i class="fas fa-feather-alt sidenav__brand-icon"></i>
        <a class="sidenav__brand-link" href="#">物资调配<span class="text-light">管理系统</span></a>
        <i class="fas fa-times sidenav__brand-close"></i>
      </div>
      <div class="sidenav__profile">
        <div class="sidenav__profile-avatar"></div>
        <div class="sidenav__profile-title text-light">用户</div>
      </div>
      <div class="row row--align-v-center row--align-h-center">
        <ul class="navList">
          <li class="navList__heading">功能列表<i class="far fa-file-alt"></i></li>
          <li>
            <div class="navList__subheading row row--align-v-center" id="index">
              
              <span class="navList__subheading-title">首页</span>
            </div>
            
          </li>  
          <li id="managementLi">
            <div class="navList__subheading row row--align-v-center" id="management">
              
              <span class="navList__subheading-title">物资调配数据管理</span>
            </div>
            
          </li>
          <li id="warehouseLi">
            <div class="navList__subheading row row--align-v-center" id="warehouse">
              
              <span class="navList__subheading-title">仓库数据管理</span>
            </div>
            
          </li>
          <li id="submitLi">
            <div class="navList__subheading row row--align-v-center" id="submit">
              
              <span class="navList__subheading-title">物资调配请求上传</span>
            </div>
          </li>
          <li id="statisticsLi">
            <div class="navList__subheading row row--align-v-center" id="province">
              
              <span class="navList__subheading-title">省份物资统计</span>
            </div>
            
          </li>

        </ul>
      </div>
    </aside>
  
    <main class="main">
      
      <div class="main-overview">
        <div id="container">
            <h1>物资调配请求上传</h1>
            <div class="form-container">
                <form id="supplyForm">
                    <div class="form-group">
                        <label for="id">ID:</label>
                        <input type="text" id="id" name="id" required>
                    </div>
                    <div class="form-group">
                        <label for="materialType">物资种类:</label>
                        <input type="text" id="materialType" name="materialType" required>
                    </div>
                    <div class="form-group">
                        <label for="location">物资名称：</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="quantity">数量:</label>
                        <input type="number" id="quantity" name="quantity" required>
                    </div>
                    <div class="form-group">
                        <label for="location">目的地:</label>
                        <input type="text" id="target" name="target" required>
                    </div>
                    <div class="form-group">
                        <label for="location">始发地:</label>
                        <input type="text" id="location" name="location" required>
                    </div>
                    <div class="form-group">
                        <input type="submit" value="提交">
                    </div>
                    <div class="form-group">
                        <div id="formError" class="error"></div>
                    </div>
                </form>
            </div>
        
            <script>
                var formData=JSON.parse(localStorage.getItem('formData'))|| [];
                console.log(formData);
          
                document.addEventListener("DOMContentLoaded", function() {
                    var form = document.getElementById('supplyForm');
                    var formError = document.getElementById('formError');
        
                    form.addEventListener('submit', function(event) {
                        event.preventDefault(); // 阻止表单默认提交行为
                        
                        var isValid = true;
                        var id = document.getElementById('id').value;
                        var materialType = document.getElementById('materialType').value;
                        var quantity = document.getElementById('quantity').value;
                        var location = document.getElementById('location').value;
                        var target=document.getElementById('target').value;
                        var name=document.getElementById('name').value;
                        const data={
                          id: id,
                          itemName:name,
                          itemType: materialType,
                          quantity: quantity,
                          origin: location,
                          target:target,
                        };
                        formData.push((data));

                        // 简单的验证示例：检查输入是否为空
                        if (!id || !materialType || !quantity || !location) {
                            isValid = false;
                            formError.textContent = '所有字段都是必填的。';
                        } else {
                            formError.textContent = '';
                        }
                        console.log(formData);
                        // 提交表单
                        if (isValid) {
                            // 请求成功的处理逻辑
                            localStorage.setItem('formData', JSON.stringify(formData));
                            console.log('成功:', formData);
                            form.reset(); // 清空表单
                            formError.textContent = '提交成功！';
                        }
                    });
                });
            </script>
         </div>
      </div> <!-- /.main__overview -->
    </main>
  
    <footer class="footer">
      <p><span class="footer__copyright">&copy;</span> 2024 management</p>
      <p>Crafted with <i class="fas fa-heart footer__icon"></i> by <a href="" target="_blank" class="footer__signature">@Horseman</a></p>
    </footer>
  </div>
  <script src="../js/template.js"></script>
</body>

</html>

